<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>付款</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }

        .layui-form label {
            font-size: 16px;
            font-weight: bold;
            width: 120px;
            text-align: left;
        }

        .layui-form input {
            width: 1000px;
        }

        #allmap {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #l-map {
            height: 500px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }

        #leftBar {
            width: 200px;
            height: 480px;
            float: left;
            /* background-color:yellow;
	*/
        }

        #rightPage {
            position: relative;
            margin-left: 200px;
            height: 500px;
        }

        .rightPage select {
            border: 1px #993300 solid;
            background: #FFFFFF;
        }

        .content {
            background-color: lightskyblue;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div class="layui-form layuimini-form" style="width: 97%;margin:20px 0 0 15px;padding-left:10px;">
                <div class="layui-form-item">
                    <label style="font-size: 18px;color: #1E9FFF;margin-left: 15px;">新增工地收货地址</label>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择工地：</label>
                    <div class="layui-input-block">
                        <select name="workplace" id='pname' lay-search>
                            <option value="">请选择工地</option>
                            <option value="0">旭辉运河悦章</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择地址：</label>
                    <div class="layui-input-block">
                        <input type="text" name="site" id="site" placeholder="" value="" class="layui-input">
                    </div>
                </div>
                <div style="border: 1px dashed #ccc;width: 89.6%;margin:20px 0 20px 15px;padding:10px;">
                    <div id="leftBar" class="leftBar"></div>
                    <div id="rightPage" class="rightPage">
                        所在城市
                        <span id="curCity" style="font-weight: bold;"></span>
                        <input id="text_" type="text" value=""
                            style="display:inline-block;width: 400px;position: absolute;right: 300px;">
                        <input type="button" value="查询" onclick="searchByStationName();"
                            style="display:inline-block;width: 50px;position: absolute;right: 220px;">
                        <div id="container" class="content" style="position: absolute;
                            margin-top:20px; 
                            width: 900px; 
                            height: 450px; 
                            top: 50; 
                            border: 1px solid gray;
                            overflow:hidden;">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">详细地址：</label>
                    <div class="layui-input-block">
                        <input type="text" name="siteDetail" id="siteDetail" placeholder="" value=""
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收料员姓名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="workername" id="workername" placeholder="" value=""
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收料员电话：</label>
                    <div class="layui-input-block">
                        <input type="text" name="workerphone" id="workerphone" lay-verify="phone" placeholder=""
                            value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收料员2姓名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="workername2" id="workername2" placeholder="" value=""
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">收料员2电话：</label>
                    <div class="layui-input-block">
                        <input type="text" name="workerphone2" id="workerphone2" lay-verify="phone" placeholder=""
                            value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn"
                            style="position:absolute;right:100px">保存</button>
                    </div>
                </div>
            </div>
            <div style="color: #1E9FFF;width: 97%;margin:20px 0 0 15px;">
                您共有<span id="num">2</span>个收货地址
            </div>
            <div class="layuimini-container" style="width: 97%;margin:20px 0 0 15px;">
                <div class="layuimini-main">
                    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                    <script type="text/html" id="currentTableBar">
                        <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=oberB8G1V9dOnbyWGHx5AyLbqGsfMtu3">
    </script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/getscript?v=2.0&amp;ak=oberB8G1V9dOnbyWGHx5AyLbqGsfMtu3&amp;services=&amp;t=20220113143013">
    </script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <script type="text/html" id="Tpl">
        <p style="text-align: center;">{{d.workername}} {{d.workerphone}}</p>
    </script>
    <script type="text/html" id="Tpl2">
        <p style="text-align: center;">{{d.workername2}} {{d.workerphone2}}</p>
    </script>
    <script>
        function setheight() {
            var div = document.getElementById("leftBar");
            div.style.overflow = "auto";
        }
        window.onload = setheight;

        var map = new BMap.Map("container");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 12);

        var myCity = new BMap.LocalCity();
        myCity.get(function (result) {
            if (!result.name || result.name === undefined || result.name == "全国") {
                alert("系统无法识别您当前的位置，请您选择您的城市");
                var point = new BMap.Point(103.2319, 35.3349);
                map.centerAndZoom(point, 5);
            } else {
                //alert("result:"+ JSON.stringify(result));
                var cityName = result.name;
                map.setCenter(cityName);
                document.getElementById('curCity').innerText = cityName;
            }

        });

        map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

        map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
        map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
        map.addControl(new BMap.OverviewMapControl({
            isOpen: true,
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        })); //右下角，打开

        function searchByStationName() {
            map.clearOverlays(); //清空原来的标注
            var keyword = document.getElementById("text_").value;

            var options = {
                onSearchComplete: function (results) {
                    // 判断状态是否正确
                    if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
                        var s = [];
                        for (var i = 0; i < results.getCurrentNumPois(); i++) {
                            var poi = results.getPoi(i);
                            map.centerAndZoom(poi.point, 15);
                            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point
                                .lat)); // 创建标注，为要查询的地方对应的经纬度
                            var content =
                                "<h2 style='text-align: center;font-weight:bold;margin:10px 0'>" + poi.title +
                                "</h1>" +
                                "<p><b>地址</b>：" + poi.address + "</p>" + "</div>";
                            map.addOverlay(marker);
                            addClickHandler(content, marker);

                            s.push("<a href='javascript:void(0)' onclick='openInfoWin(" + JSON.stringify(poi) +
                                "," + JSON.stringify(poi.point) + ")'><b>" + poi.title + "</b>,<br/>" + poi
                                .address + "</a>");
                        }
                        document.getElementById("leftBar").innerHTML = "<h3><b>搜索结果：</b></h3>" + s.join(
                            "<br/><br/>");
                    }
                }
            };

            var localSearch = new BMap.LocalSearch(map, options);
            localSearch.enableAutoViewport(); //允许自动调节窗体大小
            //localSearch.search(keyword);
            localSearch.searchInBounds(keyword, map.getBounds());
        }


        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e)
            });
        }

        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }


        function openInfoWin(poi, point) {
            //alert("poi="+poi.title);
            var content =
                "<h2 style='text-align: center;font-weight:bold;margin:10px 0'>" + poi.title + "</h2>" +
                "<p style='font-size:14px;display:inline-block;margin-bottom:10px'><b>地址</b>：" + poi.address + "</p>" +
                "<p style='display:inline-block;margin-left:10px'><button type='button' onClick='clickToBook(" + point
                .lat + "," + point.lng +
                ")'>显示经纬度</button></p>" +
                "<p style='font-size:14px;margin-bottom:10px;'><b>纬度</b>：<span id='latitude'>/</span>" + "</p>" +
                "<p style='font-size:14px;' ><b>经度</b>：<span id='longitude'>/</span>" + "</p>";
            var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                //title: "信息框3", //标题
                width: 320, //宽度
                height: 150, //高度
                panel: "panel", //检索结果面板
                enableAutoPan: true, //自动平移
                searchTypes: []
            });
            document.getElementById('site').value = poi.address;
            searchInfoWindow.open(new BMap.Point(point.lng, point.lat));
        }

        function clickToBook(lat, lng) {
            document.getElementById('latitude').innerText = lat;
            document.getElementById('longitude').innerText = lng;
            // alert("纬度：" + lat + ",经度：" + lng);
        }

        var opts = {
            width: 300, // 信息窗口宽度
            height: 100, // 信息窗口高度
            //title : "信息窗口" , // 信息窗口标题
            enableMessage: false //设置允许信息窗发送短息
        };
        layui.use(['form', 'jquery', 'miniTab', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                miniTab = layui.miniTab,
                table = layui.table;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var strCookie = document.cookie;
            if (strCookie != '') {
                var arrCookie = strCookie.split("; ");
                for (i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (arr[0] == 'username')
                        username = arr[1];
                    else if (arr[0] == 'remember')
                        remember = 1;
                    else if (arr[0] == 'password')
                        password = arr[1];
                }
            }
            table.render({
                elem: '#currentTableId',
                url: '/workplace',
                method: 'get',
                parseData: function (res) { //res 即为原始返回的数据
                    $('#num').text(res.count);
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析表格数据总条数 eg:共100页              
                        "data": res.data //解析table表格数据源
                    };
                },
                where: {
                    "username": username,
                    "mode": 1
                }, //where用来传递请求时额外的参数 eg:productName
                cols: [
                    [{
                            field: 'pname',
                            width: 200,
                            title: '工地名称',
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'siteDetail',
                            width: 300,
                            title: '详细地址',
                            align: "center",
                        },
                        {
                            field: 'worker1',
                            width: 250,
                            title: '收料员1信息',
                            align: "center",
                            templet: '#Tpl',
                        },
                        {
                            field: 'worker2',
                            width: 250,
                            title: '收料员2信息',
                            align: "center",
                            templet: '#Tpl2',
                        },
                        {
                            title: '操作',
                            minWidth: 100,
                            toolbar: '#currentTableBar',
                            align: "center"
                        }
                    ]
                ],
                page: true,
                limit: 5,
                limits: [5],
                skin: 'line'
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    var options = {
                        href: 'table/editwkp.html?pid=' + data.pid,
                        title: '编辑工地'
                    };
                    parent.layui.miniTab.openNewTabByIframe(options);
                    return false;
                }
            });
            //监听提交
            form.on('submit(saveBtn)', function (data) {
                data1 = data.field;
                data1.username = username;
                var index = layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                }, function () {
                    data1.mode = '4';
                    $.get('/workplace', data1, function (re) {
                        if (re == '1') {
                            layer.msg('修改成功！');
                        } else {
                            layer.msg('修改失败！');
                        }
                    })

                });
                return false;

            });
        });
    </script>
</body>

</html>